<template lang="pug">
  div#StatusColumn
    div.column(v-for="(item,index) in columnData")
      div.user-head
        img(:src="item.userHead")
      div.status-content
        span.user-name {{item.userName}}
        span.content-time {{item.contentTime}}
        div.content-text {{item.contentText}}
        div.content-img-block(v-if="item.contentImg.length > 0")
          img(v-for="imgItem in item.contentImg",:src="imgItem")
        span.comment-block(@click="showComment(index)")
          i.iconfont.icon-xiaoxi
          span.comment-number {{item.commentNumber}}
          span.comment-triangle(v-if="item.ifComment")
        span.like-block(:class="[item.ifLike ? 'highLight' : '']",@click="showLike(index)")
          i.iconfont(:class="[item.ifLike ? 'icon-xihuan-tianchong' : 'icon-xihuan']")
          span.like-number {{item.likeNumber}}
        div.all-comment(v-if="item.ifComment")
          template(v-for="commentItem in item.commentList")
            div.comment-list
              span.comment-user-name {{commentItem.commentUserName}}：
              span {{commentItem.commentText}}
</template>
<script>
  export default {
    props: ['columnData'],
    methods: {
      showComment(index) {
        this.$emit('showComment', index)
      },
      showLike(index) {
        this.$emit('showLike', index)
      }
    }
  }
</script>
<style scoped lang="less">
  #StatusColumn {
    .column {
      padding: 20px 20px 10px 20px;
    }
  }
</style>
